<template>
	<scroll-view
		class="scroll-box"
		lower-threshold="1"
		scroll-y="true" 
		:refresher-enabled="refresherEnabled"
		refresher-background="#F2F4F8"
		refresher-default-style="white"
		:refresher-triggered="refresherRriggered"
		scroll-with-animation
		:scroll-top="scrollTop"
		@scrolltolower="scrolltolower"
		@refresherrefresh="refresherrefresh">
		<view>
			<slot></slot>
		</view>
		<view v-if="scrollBoolean >= 5" class="load-box">{{ scrollLoad ? '加载中...' : '没有更多啦' }}</view>
		<view v-else-if="scrollBoolean === 0" class="empty-box">
			<image
				class="empty-img"
				src="@/static/img/custom-empty-image.png"
				mode="aspectFit"></image>
				<view class="mg-tp20 col-9e">暂无数据</view>
		</view>
	</scroll-view>
</template>

<script setup>
	defineProps({
		scrollTop: {
			type: Number,
			default: _ => 0
		},	//	设置竖向滚动条位置
		scrollLoad: {
			type: Boolean,
			default: _ => false
		},	//	滚动底部状态
		scrollBoolean: {
			type: Number,
			default: _ => 0
		},	//	数据为0
		refresherRriggered: {
			type:	Boolean,
			default: _ => false
		},	//	下拉刷新状态值
		refresherEnabled: { // 是否开起下拉刷新
			type:	Boolean,
			default: _ => true
		}
	})
	const emit = defineEmits(['scrolltolower', 'refresherrefresh'])
	const scrolltolower = _ => emit('scrolltolower') // 滚动到底部/右边，触发事件
	const refresherrefresh = _ => emit('refresherrefresh') // 自定义下拉刷新被触发
</script>

<style scoped lang="less">
	.scroll-box {
		height: 100%;
		.load-box {
			font-size: 14px;
			color: #333;
			width: 100%;
			padding: 10px 0;
			text-align: center;
		}
		.empty-box {
			position: absolute;
			height: 100%;
			width: 100%;
			top: 0;
			left: 0;
			display: flex;
			justify-content: center;
			flex-direction: column;
			align-items: center;
			.empty-img {
				width: 200rpx;
				height: 200rpx;
			}
		}
	}
</style>